const ProductMetadataManagement = {
    template: `
        <div>
            <el-button @click="newProductfileDialogVisible = true" plain round :style="buttonStyle">新增商品</el-button>
            <br>
            <el-table :data="productfileList" :style="tableStyle">
                <el-table-column label="库存ID" prop="productRecordId"></el-table-column>
                <el-table-column label="品名" prop="productName"></el-table-column>
                <el-table-column label="进价" prop="purchasePrice"></el-table-column>
                <el-table-column label="售价" prop="price"></el-table-column>
                <el-table-column label="货架" prop="shelfId"></el-table-column>
                <el-table-column label="类别" prop="category"></el-table-column>
                <el-table-column label="数量" prop="stock"></el-table-column>
                <el-table-column label="保质期">
                    <template #default="{ row }">
                        {{ dayjs(row.dateOfUse).format('YYYY/MM/DD') }}
                    </template>
                </el-table-column>

<!--                <el-table-column label="操作">-->
<!--                    <template #default="{ row }">-->
<!--                        <el-button @click="editProductMetadata(row)" type="primary" text size="small">编辑</el-button>-->
<!--                            <el-popconfirm-->
<!--                                title="确定要删除此库存吗？（操作不可逆）"-->
<!--                                confirm-button-text="确定"-->
<!--                                cancel-button-text="取消"-->
<!--                                confirm-button-type="danger"-->
<!--                                @confirm="deleteProductfile(row.productRecordId)"-->
<!--                            >-->
<!--                            <template #reference>-->
<!--                                <el-button type="danger" text>删除</el-button>-->
<!--                            </template>-->
<!--                        </el-popconfirm>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column label="操作" width="250" :label-style="{ padding: '5px 10px', textAlign: 'center' }">
              <template #default="{ row }">
                <div style="display: flex; justify-content: space-between;">
                  <el-button 
                    @click="editProductMetadata(row)" 
                    type="primary" 
                    text 
                    size="small"
                    style="margin-left: 10px; border: 1px solid #dcdfe6; padding: 5px 10px; font-size: 12px;"
                  >编辑</el-button>
                  <el-popconfirm 
                    title="确定要删除此区域吗？（操作不可逆）"
                    width="300px"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    confirm-button-type="danger"
                    @confirm="deleteProductfile(row.productRecordId)"
                  >
                    <template #reference>
                      <el-button 
                        type="danger"
                        primary
                        size="small"
                        style="border: 1px solid #dcdfe6; padding: 5px 10px;font-size: 12px;"
                      >删除</el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
            </el-table>

            <!-- 编辑用户信息的对话框 -->
            <el-dialog
              v-model="editProductMetadataDialogVisible"
              title="更改库存信息"
              width="400px">

                <el-form :model="currentProductMetadata" label-width="80px">
                    <el-form-item label="商品名称">
                        <el-input v-model="currentProductMetadata.productName" type="text" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="进价">
                        <el-input v-model="currentProductMetadata.purchasePrice" type="number" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="售价">
                        <el-input v-model="currentProductMetadata.price" type="number" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="货架">
                        <el-select v-model="currentProductMetadata.shelfId" placeholder="请选择货架" style="width: 250px">
                            <el-option v-for="item in shelvesList" :label="item.shelfId" :value="item.shelfId"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="类别">
                        <el-input v-model="currentProductMetadata.category" type="text" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="数量">
                        <el-input v-model="currentProductMetadata.stock" type="number" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="保质期">
                        <el-date-picker
                          v-model="currentProductMetadata.dateOfUse"
                          type="date"
                          placeholder="设置保质期"
                          format="YYYY/MM/DD"
                          style="width: 250px"
                        />
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="editProductMetadataDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveProductMetadata">保存</el-button>
                </div>
            </el-dialog>

            <!-- 新增库存的对话框。 -->
            <el-dialog v-model="newProductfileDialogVisible" title="新增库存" width="400px">
                <el-form :model="newProductMetadataForm" label-width="80px">
                    <el-form-item label="商品名称">
                        <el-input v-model="newProductMetadataForm.productName" type="text" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="进价">
                        <el-input v-model="newProductMetadataForm.purchasePrice" type="number" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="售价">
                        <el-input v-model="newProductMetadataForm.price" type="number" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="货架">
                        <el-select v-model="newProductMetadataForm.shelfId" placeholder="请选择货架" style="width: 250px">
                            <el-option v-for="item in shelvesList" :label="item.shelfId" :value="item.shelfId"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="类别">
                        <el-input v-model="newProductMetadataForm.category" type="text" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="数量">
                        <el-input v-model="newProductMetadataForm.stock" type="number" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="保质期">
                        <el-date-picker
                          v-model="newProductMetadataForm.dateOfUse"
                          type="date"
                          placeholder="设置保质期"
                          format="YYYY/MM/DD"
                          style="width: 250px"
                        />
                    </el-form-item>
                    

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="newProductfileDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="onNewProductMetadataFormSubmit">确定</el-button>
                    </div>
                </el-form>
            </el-dialog>
        </div>
    `,
    setup() {
        const productfileList = ref([]);
        const shelvesList = ref([]);

        // 对话框可见性。
        const editProductMetadataDialogVisible = ref(false);
        const newProductfileDialogVisible = ref(false);

        // 当前正在编辑的用户数据。
        const currentProductMetadata = ref({
            productRecordId: '',
            productId: '',
            productName: '',
            purchasePrice: '',
            price: '',
            dateOfUse: '',
            shelfId: '',
            category: '',
            stock: ''
        });


        // 新增库存的表单。
        const newProductMetadataForm = ref({
            productId: '',
            productName: '',
            purchasePrice: '',
            price: '',
            dateOfUse: '',
            shelfId: '',
            category: '',
            stock: ''
        })

        // 编辑库存信息。
        const editProductMetadata = (product) => {
            // 将选中的库存数据填充到编辑表单
            currentProductMetadata.value = { ...product };
            editProductMetadataDialogVisible.value = true;
        };

        const tableStyle = {
            backdropFilter: "blur(10px)",
            WebkitBackdropFilter: "blur(10px)",
            borderRadius: "12px",
            boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
            border: "1px solid rgba(255, 255, 255, 0.4)",
            overflow: "hidden"
        }

        const buttonStyle = {
            width: "100%",
            marginBottom: "10px"
        }

        const saveProductMetadata = () => {
            console.log(typeof currentProductMetadata.value.dateOfUse);
            console.log(currentProductMetadata.value.dateOfUse);

            const params = {
                productRecordId: currentProductMetadata.value.productRecordId,
                productId: currentProductMetadata.value.productId,
                productName: currentProductMetadata.value.productName,
                purchasePrice: currentProductMetadata.value.purchasePrice,
                price: currentProductMetadata.value.price,
                dateOfUse: dayjs(currentProductMetadata.value.dateOfUse, "YYYY/MM/DD").toISOString(),
                shelfId: currentProductMetadata.value.shelfId,
                category: currentProductMetadata.value.category,
                stock: currentProductMetadata.value.stock
            }

            axios.put("http://localhost:8080/productfile/update", params, {
                headers: {
                    "Content-Type": "application/json",
                },
            }).then((response) => {
                const res = response.data;
                if (res.code === 200) {
                    app.config.globalProperties.$message({
                        message: "信息已更新。",
                        type: "success",
                    });
                }
                else if (res.code === 500) {
                    app.config.globalProperties.$message({
                        message: "信息更新失败。",
                        type: "error",
                    });
                }
            })

            editProductMetadataDialogVisible.value = false;
            window.location.reload();   // 刷新，以显示最新的信息。
        };

        // 确认删除用户的事件。
        const deleteProductfile = (id) => {
            axios.delete(`http://localhost:8080/productfile/delete?productRecordId=${id}`).then((response) => {
                const res = response.data;
                if (res.code === 200) {
                    app.config.globalProperties.$message({
                        message: "库存已删除。",
                        type: "success",
                    });
                }
                else if (res.code === 500) {
                    app.config.globalProperties.$message({
                        message: "库存删除失败。",
                        type: "error",
                    });
                }

                window.location.reload();   // 刷新，以显示最新的信息。
            })
        }

        const onNewProductMetadataFormSubmit = () => {
            if (newProductMetadataForm.value.productName.trim() === "") {
                app.config.globalProperties.$message({
                    message: "库存名称不能为空。",
                    type: "error",
                })
            }
            else {
                const params = {
                    productId: newProductMetadataForm.value.productId,
                    productName: newProductMetadataForm.value.productName,
                    purchasePrice: newProductMetadataForm.value.purchasePrice,
                    price: newProductMetadataForm.value.price,
                    dateOfUse: dayjs(newProductMetadataForm.value.dateOfUse, "YYYY/MM/DD").toISOString(),
                    shelfId: newProductMetadataForm.value.shelfId,
                    category: newProductMetadataForm.value.category,
                    stock: newProductMetadataForm.value.stock
                }

                axios.post("http://localhost:8080/productfile/add", params).then((response) => {
                    const res = response.data;
                    if (res.code === 200) {
                        app.config.globalProperties.$message({
                            message: "添加成功。",
                            type: "success",
                        });

                        // 延时刷新以获取最新数据。
                        setTimeout(() => {
                            window.location.reload();
                        }, 2000);
                    }
                    else if (res.code === 500) {
                        app.config.globalProperties.$message({
                            message: "添加失败。",
                            type: "error",
                        });
                    }

                    newProductfileDialogVisible.value = false;
                })
            }
        }

        // 使用 axios 获取数据。
        const fetchProductfileList = async () => {
            try {
                const response = await axios.get("http://localhost:8080/productfile/list");
                if (response.data.code === 200) {
                    productfileList.value = response.data.data;
                } else {
                    app.config.globalProperties.$message({
                        message: '加载失败: ' + response.data.msg,
                        type: 'error'
                    });
                }
            } catch (error) {
                console.error("请求失败", error);
                app.config.globalProperties.$message({
                    message: '请求失败，请重试。',
                    type: 'error'
                });
            }
        };

        const fetchShelvesList = async () => {
            try {
                const response = await axios.get("http://localhost:8080/shelf/all");
                if (response.data.code === 200) {
                    shelvesList.value = response.data.data;
                } else {
                    app.config.globalProperties.$message({
                        message: '加载失败: ' + response.data.msg,
                        type: 'error'
                    });
                }
            } catch (error) {
                console.error("请求失败", error);
                app.config.globalProperties.$message({
                    message: '请求失败，请重试。',
                    type: 'error'
                });
            }
        };


        // 调用请求方法。
        fetchProductfileList();
        fetchShelvesList();

        return {
            productfileList,
            shelvesList,
            editProductMetadataDialogVisible,
            currentProductMetadata,
            editProductMetadata,
            saveProductMetadata,
            deleteProductfile,
            newProductMetadataForm,
            newProductfileDialogVisible,
            onNewProductMetadataFormSubmit,
            dayjs,
            tableStyle,
            buttonStyle
        };
    }
};